<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>角色管理</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${path}/css/metroStyle.css">
    <script src="${path}/js/jquery.ztree.all.js"></script>

</head>
<body>
<%--修改--%>
<div id="udatess" style="display:none;">
    <form class="layui-form" lay-filter="cardForm" id="cardForm" action="" style="padding:15px 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">会员卡名称:</label>
            <input type="hidden" value="" id="idd" name="id">
            <div class="layui-input-block" style="width: 300px;">
                <input type="text" name="name"  placeholder="请输入会员卡名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
<%--增加--%>
<div id="add" style="display:none;">
    <form class="layui-form" lay-filter="addform" id="addform" action="" style="padding:15px 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">会员卡名称</label>
            <div class="layui-input-block"  style="width: 300px;">
                <input type="text" name="name" required id="name12"  lay-verify="required" placeholder="请输入会员卡名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-block"  style="width: 300px;">
                <input type="text" name="money" required id="jine" lay-verify="required" placeholder="请输入金额" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>


    <div class="layui-fluid" >
        <div class="layui-row">
            <div class="layui-col-md5">
                <br>
                <h1>会员卡</h1>
                <br>
                <hr>
                <table id="roleTable" lay-filter="roleTable"></table>
            </div>
            <div class="layui-col-md1" style="border: 1px solid #fff">
            </div>
            <div class="layui-col-md6">
                <br>
                <h1>所属套餐<i style="font-size: 13px;color: red">&nbsp;&nbsp;选择会员卡左侧的单选按钮</i></h1>
                <br>
                <hr>
                <table id="cardvip" lay-filter="cardvip"></table>
            </div>
        </div>
    </div>

<script>
    var isTrue = true;
    //判断是否存在重复的登录名称
    function selectUserName(){
        var userName = $("#name12").val();
        var id = $(":input[name = 'id']").val();
        $.get("${path}/viptype/getRole",{name:userName,id:id},function (data) {
            console.log(data.username);
            if(data != ""){
                layer.msg("该会员卡已存在!");
                isTrue = false;
            }else{
                isTrue = true;
            }
        });
    }

    layui.use('table',function () {
        var table=layui.table;
        //渲染表格
        table.render({
            elem:'#roleTable',
            url:'${path}/viptype/list',
            page:true,
            even: true,
            toolbar:'#toolbarDemo',
            cols:[[
                {type: 'radio'},
                {field: 'id',title:'编号',sort:false},
                {field: 'name',title: '会员卡名称',sort:false},
                {toolbar:'#barDemo',title:'操作',sort:false}
            ]]
        })

        //监听行工具事件
        table.on("tool(roleTable)",function (obj) {
            var data=obj.data;
            if (obj.event=='edit'){
                layer.open({
                    type: 1,
                    title: "修改会员卡",
                    skin: "layui-layer-molv",
                    anim: 0,
                    offset:"120px",
                    area: "500px",
                    content: $("#udatess"),
                    btn: ['确定','返回'],
                    success: function () {
                        console.log(data)
                        layui.form.val("cardForm",data);
                    },
                    yes:function (index) {
                        var cardForm=$("#cardForm").serialize();
                        console.log(cardForm);
                        $.post("${path}/viptype/updatecard",cardForm,function () {
                            layer.msg('修改成功');
                            layer.close(index);
                            table.reload('roleTable');
                        })
                    }
                });

            }else if (obj.event=='del'){
                layer.open({
                    time:0,
                    title:'友情提示',
                    content:'确定要删除此行数据吗？',
                    shade:[0.3,'#000'],
                    btn:['确定','取消'],
                    yes:function (index) {
                        console.log(data)
                        $.post("${path}/viptype/getzi",{id:data.id},function (date) {
                            if(date.code==1){
                                layer.msg("该权限包含其他权限，无法删除...",{time:1200})
                            }else if(date.code==0){
                                $.post("${path}/viptype/delid",{id:data.id},function () {
                                    layer.msg("删除成功...",{time:1200})
                                    layer.close(index);
                                    table.reload('roleTable');
                                })
                            }
                        })
                    }
                })
            }

        })
        //监听工具栏事件
        table.on('toolbar(roleTable)',function (obj) {
            var e=obj.event;
            switch (e) {
                case "add":
                    layer.open({
                        type: 1,
                        title: "增加会员卡",
                        skin: "layui-layer-molv",
                        anim: 0,
                        offset:"120px",
                        area: "500px",
                        content: $("#add"),
                        btn: ['确定','返回'],
                        success:function(){
                            $("#name").val('');
                            $("#jine").val('');
                            $(":input[name = 'name']").blur(function () {
                                selectUserName();
                            })
                        },
                        yes:function (index) {
                            var reg = /^[0-9]+$/
                            var str = document.getElementById("jine").value;
                            var name = $("#name12").val();
                            var jiage = $("#jine").val();
                            if(name == null || name == ""){
                                layer.msg("<v style='color:red'>" + "会员卡名称不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(jiage == null || jiage == ""){
                                layer.msg("<v style='color:red'>" + "价格不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(!reg.test(str)){
                                layer.msg("<v style='color:red'>" + "金额必须为数字！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else{
                                selectUserName();
                                if(isTrue){
                                    var addform=$("#addform").serialize();
                                    $.post("${path}/viptype/addcard",addform,function () {
                                        layer.msg('增加成功');
                                        layer.close(index);
                                        table.reload('roleTable');
                                    })
                                }
                            }
                        }
                    });
                    break;
            }
        })

        //监听单选框事件
        table.on("radio(roleTable)",function (obj) {
            var  roleId=obj.data.id;
                table.render({
                    elem:'#cardvip',
                    url:'${path}/viptype/dangeid?id='+roleId,
                    text: {none: '没有查到相关套餐'},
                    even: true,
                    width:'560',
                    cols:[[
                        {templet: '#name',title: '套餐名称',sort:false},
                        {templet:'#shangpin',title:'商品名称',sort:false},
                        {field:'time',title:'套餐时长',sort:false}
                    ]]
                })
        })
    })

</script>

    <script type="text/html" id="barDemo">
        <a href="javascript:void (0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
        <a href="javascript:void (0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
        </div>
    </script>
<script type="text/html" id="shangpin">
    {{d.shoppings.name}}
</script>
<script type="text/html" id="name">
    {{d.packageType.name}}
</script>
</body>
</html>
